<template>
  <div>
    <el-dialog
      :title="$t('public.reTip')"
      :visible.sync="tipsDialogVisible"
      :width="width + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="$emit('listenTips')"
      append-to-body
      center>
      <div class="center el-pagination__total font16" style="padding-bottom: 10px;">{{text}}</div>
      <div class="center el-pagination__total font14" style="padding-bottom: 20px; color: #999;" v-if="text1">{{text1}}</div>
      <div class="pt"></div>
      <span slot="footer" class="dialog-footer" v-if="showBtn">
        <el-button type="primary" @click="$emit('listenTips', 'sure')">{{$t('public.comfirm')}}</el-button>
      </span>
      <span slot="footer" class="dialog-footer mld" v-if="showBtn && hasCancel">
        <el-button type="default"
        @click="$emit('listenTips', 'cancel')">{{$t('public.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Tips',
  data() {
    return {
      tipsDialogVisible: true,
    }
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 420,
    },
    text: {
      type: String,
      default: '',
    },
    text1: {
      type: String,
      default: '',
    },
    hasCancel: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
  },
}
</script>

<style lang="scss" scoped>
.font16 {
  font-size: 16px !important;
}

.font14 {
  font-size: 14px !important;
}

.font12 {
  font-size: 12px !important;
}
</style>
